<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	<title>想即做thinkTodo任务清单</title>
	<script src="/libs/react-15.2.0/build/react.js"></script>
    <script src="/libs/react-15.2.0/build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>	
	<!-- 新 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	<link href="/libs/font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" href="/_assets/css/base.css" >
	<link rel="stylesheet" href="/_assets/css/home_with_bs.css" >
	<link rel="stylesheet" href="/_assets/css/task_with_bs.css" >
	<link rel="stylesheet" href="/_assets/css/style_tags.css" >
  </head>
<body>
<div id="container">
</div>
<div id="task_view">
	<div class="btn-group r " >
	  <button type="button" class="btn btn-warning" title="查看不同状态的任务">筛选</button>
	  <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		<span class="caret"></span>
	  </button>
	  <ul id="dropmenu" class="dropdown-menu" style="right:0;min-width:100px;">
	  
	  		</ul>
	</div>
</div>
<div id="task_view2">
</div>
    <script type="text/babel">
      var ExampleApplication = React.createClass({
        render: function() {
          var elapsed = Math.round(this.props.elapsed  / 100);
          var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
          var message =
            'React has been successfully running for ' + seconds + ' seconds.';
          return <p>{message}</p>;
        }
      });
      var start = new Date().getTime();
      setInterval(function() {
        ReactDOM.render(
          <ExampleApplication elapsed={new Date().getTime() - start} />,
          document.getElementById('container')
        );
      }, 50);
    </script>
	
<script type="text/babel">
      var TaskHead = React.createClass({
        render: function() {
          return <div className="task_head">
					<span className="task_title">{this.props.task_title}</span>
				</div>;
        }
      });
	  
	  var TaskList = React.createClass({
        render: function() {
          return <div className="task_list" id={this.props.domid+'list'}>
				</div>;
        }
      });
	  
	  var Task = React.createClass({
		getInitialState: function() {
			return {hasChildTask: false};
		},  
        render: function() {
          return <div className="task" data-taskid={this.props.taskid} id={this.props.domid} draggable="true" ondragstart="task_dragstart(event)" data-sort={this.props.sort} data-stage="" data-getway="P" data-intags="" data-tags="" ondragover="task_dragover(event)" ondrop="task_drop(event)" ondragenter="task_dragenter(event)" ondragleave="task_dragleave(event)">
					<TaskHead task_title={this.props.task_title}/>
					<TaskList domid={this.props.domid} />
				</div>;
        }
      });
	
	function refresh_all_and_append(){
		var items;
		$.getJSON("/index.php/workarea/getlist/", 
			function(dataGet) { 
//			console.log(dataGet);
				if(dataGet){
					console.log(dataGet.data);
					items=dataGet;
					console.log(items);
					
					 ReactDOM.render(
					   <div>
					   {
						 items.map(function (item) {		 
						   return <li><a href="#" onclick="show_or_hide_stage('{item.id}');"><i class="fa fa-fw icon-urgent "></i>{item.name}</a></li>
						 })
					   }
					   </div>,
					   document.getElementById('dropmenu')
					 );

						
					
					$('#btn_refresh_all i').removeClass('fa-spin');

				}
			}		
		);
		$('#btn_refresh_all i').addClass('fa-spin');
	}

	  
	var unique_dom_id=1000;
	 ReactDOM.render(	   
		<Task task_title="所有任务" taskid="1" domid="900" sort="2342" />,
		document.getElementById('task_view2')
	);
	refresh_all_and_append();  
</script>
	
  </body>
</html>